import React, { useState, useRef, useEffect } from 'react'
import { Input } from 'antd'
import { InbizIcon, h5Utils } from '@inbiz/utils';
import SearchView from '../SearchView'
import LabelConfigSelect from '../SearchView/LabelConfigSelect'
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import './index.less'
function SmallPanelView(props: any) {
  const { indexRange, customPlaceholderText, interactiveMethods, fixedWidth, showOriginSearch, $showOriginSearch  } = props
  const [inputwidth, $inputwidth] = useState(400)
  const $divRef = useRef<HTMLDivElement>(null)
  const { keyword } = useSearchUIState();
  const updateUIState = useSearchUIDispatch();
  const setInputWidth = () => {
    const screenWidth = window.screen.width
    if (screenWidth < 1300 && showOriginSearch) {
      $inputwidth(500)
    } else if (showOriginSearch) {
      $inputwidth(600)
    } else {
      $inputwidth(400)
    }
  }

  useEffect(() => {
    document.addEventListener('resize', setInputWidth)
    return () => {
      document.removeEventListener('resize', setInputWidth)
    }
  }, [])
  useEffect(() => {
    setInputWidth()
  }, [showOriginSearch])

  useEffect(() => {
    if (interactiveMethods == 'fixedWidth') {
      $inputwidth(fixedWidth || 420)
    }
  }, [interactiveMethods])

  return (
    <div className='smallPanelViewContainer' style={{ width: inputwidth }} ref={$divRef}  onClick={() => {
      h5Utils.inbizPageEvent.emit(props.controlId, true, 1);
      $showOriginSearch(true)
    }}>
      {showOriginSearch || interactiveMethods == 'fixedWidth' ? <SearchView {...props} $showOriginSearch={$showOriginSearch} showOriginSearch={showOriginSearch} inputwidth={inputwidth} smallPanelViewInputClassName='smallPanelViewInputClassName' />
        :
        <div className={` ${indexRange ? 'previewtype' : ''}`} >
          <Input
            className={'search-input-control'}
            placeholder={customPlaceholderText}
            value={keyword}
            addonBefore={Boolean(indexRange) && <LabelConfigSelect smallPanelViewInputClassName='smallPanelViewInputClassName' />}
            suffix={
              <InbizIcon
                type={props.searchIcon.type}
                style={{ fontSize: 16, color: '#666' }}
              />
            }
            onChange={(e) => {
              $showOriginSearch(true);
              updateUIState({ keyword: e.target.value })
            }}
          />
        </div>
      }

    </div>
  )
}
SmallPanelView.displayName = 'SmallPanelView';
export default SmallPanelView